<template>
  <el-dialog title="编辑角色" width="640px" top="20px" :visible="visible" @close="handleClose">
    <div class="white-card">
      <el-form ref="form" :model="form" :rules="rules" label-width="95px">
        <el-form-item label="用户名：" prop="name">{{ details.accountName }}</el-form-item>

        <el-form-item label="用户角色：" prop="name">
          <el-checkbox label="部门成员" disabled checked></el-checkbox>
          <el-checkbox-group v-model="form.roles">
            <div v-for="item in accountRoleTypeTypeArr" :key="item.id">
              <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
            </div>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="split"></div>

    <div class="dialog-footer-btn">
      <el-button @click="handleClose" type="primary" plain>关闭</el-button>
      <el-button @click="handleSubmit" :loading="submitting" type="primary">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import * as userRoleRelationAPI from "@/api/userRoleRelation";
import * as mixins from "@/utils/mixins";
import { accountRoleTypeTypeDict } from "@/utils/dict";
import { dict2Array } from "@/utils/common";

export default {
  name: "roleEditor",
  mixins: [mixins.dialog, mixins.form],
  props: {
    details: { type: Object, default: Object },
  },
  data() {
    return {
      form: {
        roles: [],
      },
      rules: {},
      accountRoleTypeTypeArr: dict2Array(accountRoleTypeTypeDict),
      submitting: false,
    };
  },
  methods: {
    show() {
      if (this.details.roles) {
        this.form.roles = this.details.roles.split(",");
      } else {
        this.form.roles = [];
      }
    },
    handleSubmit() {
      this.submitting = true;
      this.validateAndConfirm("form")
        .then(() =>
          userRoleRelationAPI.edit({
            roles: this.form.roles.join(","),
            ordCode: this.details.orgCode,
            userAccountId: this.details.accountId,
          })
        )
        .then(() => {
          this.$emit("success");
          this.handleClose();
        })
        .finally(() => (this.submitting = false));
    },
  },
};
</script>

<style scoped></style>
